<template>
  <el-dialog width='80%' class='WholeScroll' :visible.sync='formShow' @close="handleClickDeal('cancel')" v-dialog-drag v-loading='loading' :modal-append-to-body='false' :close-on-click-modal='false'>
    <span slot='title'>
      <span>{{ title }}</span>
    </span>
    <div class='detail-box'>
      <el-form :model='formBaseData' ref='formBaseData' :rules='formBaseRules'>
        <div class='content-box'>
          <el-tabs v-model='activeName' style='width:100%;margin-bottom: 0'>
            <el-tab-pane label='基本信息' name='first' class='first-tab'>
              <div style='max-height: 580px;overflow-y: auto;padding:  0 15px;' class='WholeScroll'>
                <cmsDetailRowFile :tableFileList='formBaseData.file' :showTable='showRowTable'></cmsDetailRowFile>
                <el-row>
                  <el-col :span='12'>
                    <el-form-item label='关联设计变更申请单' prop='formIdDesign' :label-width='formlabelWidth'>
                      <el-select class='select' v-on:change='chooseModifyDesign' value-key='id' v-model='formBaseData.formIdDesign' placeholder='选择关联设计变更申请单' style='width: 100%' :disabled="detailType === 'check' || detailType === 'approve' ">
                        <el-option v-for='item in selectList.designFormList' :key='item.id' :label='item.changeCode' :value='item.id' :disabled='item.disable'>
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span='12'>
                    <el-form-item label='预估变更金额' prop='moneyPlan' :label-width='formlabelWidth'>
                      <el-input v-model='formBaseData.moneyPlan' placeholder='请输入缺项单价申报编号' disabled>
                        <template slot='append'>万元</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span='12'>
                    <el-form-item label='关联新增缺项单价' :label-width='formlabelWidth'>
                      <el-select class='select' v-on:change='chooseUnitPriceForm' value-key='id' v-model='formBaseData.formIdUnitPrice' placeholder='选择关联新增缺项单价' style='width: 100%' :disabled="detailType === 'check' || detailType === 'approve' ">
                        <el-option v-for='item in selectList.unitPriceList' :key='item.id' :label='item.code' :value='item.id'>
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span='12'>
                    <el-form-item label='关联现场初步审查' :label-width='formlabelWidth'>
                      <el-select class='select' v-on:change='chooseRequestForm' value-key='id' v-model='formBaseData.formIdSurveyFirst' placeholder='选择关联现场初步审查' style='width: 100%' :disabled="detailType === 'check' || detailType === 'approve' ">
                        <el-option v-for='item in selectList.requestFormList' :key='item.id' :label='item.preliminaryReviewNumber' :value='item.id'>
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span='12'>
                    <el-form-item label='现场初步审查日期' prop='formIdSurveyFirstDate' :label-width='formlabelWidth'>
                      <el-date-picker style='width:100%;' v-model='formBaseData.formIdSurveyFirstDate' type='date' disabled value-format='yyyy-MM-dd' placeholder='选择现场初步审查日期'></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span='12'>
                    <el-form-item label='变更编号' prop='code' :label-width='formlabelWidth'>
                      <el-input v-model='formBaseData.code' placeholder='请输入变更编号' :disabled="detailType === 'check' || detailType === 'approve' ">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='12'>
                    <el-form-item label='里程桩号' prop='pileNo' :label-width='formlabelWidth'>
                      <el-input v-model='formBaseData.pileNo' placeholder='请输入里程桩号' :disabled="detailType === 'check' || detailType === 'approve' ">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span='24'>
                    <el-form-item label='设计变更项目(部位)' prop='changePart' :label-width='formlabelWidth'>
                      <el-input v-model='formBaseData.changePart' placeholder='请输入设计变更项目(部位)' :disabled="detailType === 'check' || detailType === 'approve' ">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span='12'>
                    <el-form-item label='变更等级' prop='formIdDesign' :label-width='formlabelWidth'>
                      <el-select class='select' value-key='id' v-model='formBaseData.modifyLevel' placeholder='选择变更等级' style='width: 100%' :disabled="detailType === 'check' || detailType === 'approve' ">
                        <el-option v-for='item in selectList.changeLevel' :key='item.id' :label='item.name' :value='item.id'>
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span='12'>
                    <el-form-item label='变更申报金额' prop='moneyReport' :label-width='formlabelWidth'>
                      <el-input v-model='formBaseData.moneyReport' placeholder='请输入变更申报金额' disabled>
                        <template slot='append'>万元</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span='12'>
                    <el-form-item label='申报日期' prop='formIdDesign' :label-width='formlabelWidth'>
                      <el-date-picker style='width:100%;' v-model='formBaseData.reportDate' type='date' :disabled="detailType === 'check' || detailType === 'approve'" value-format='yyyy-MM-dd' placeholder='选择现场初步审查日期'></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span='24'>
                    <el-form-item label='设计变更内容' prop='changeContent' :label-width='formlabelWidth'>
                      <el-input type='textarea' :rows='6' placeholder='请输入设计变更内容' v-model='formBaseData.changeContent' :disabled="detailType === 'check' || detailType === 'approve'"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span='24'>
                    <el-form-item label='设计变更理由' prop='changeReason' :label-width='formlabelWidth'>
                      <el-input type='textarea' :rows='6' placeholder='请输入设计变更理由' v-model='formBaseData.changeReason' :disabled="detailType === 'check' || detailType === 'approve'"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span='24'>
                    <el-form-item label='设计变更技术经济比较' prop='changeTechCompare' :label-width='formlabelWidth'>
                      <el-input type='textarea' :rows='6' placeholder='请输入设计变更技术经济比较' v-model='formBaseData.changeTechCompare' :disabled="detailType === 'check' || detailType === 'approve'"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span='24'>
                    <cmsFileTable ref='cmsFileTable' :buildUnitTable='buildUnitTable' :fileSystem='fileSystem' :detailId='detailId' :detailType='detailType' :buttonDelShow='buttonDelShow' :showNone='showNone' :buttonCheckShow='buttonCheckShow' :buttonUploadShow='buttonUploadShow' @change='tableChange'>
                    </cmsFileTable>
                  </el-col>
                </el-row>
                <el-row v-if='isShowBpmn'>
                  <el-col :span='24'>
                    <bpmn-form ref='bpmnForm' :multiple='isMultiple' proc-def-key='ModifyFeeApplyProcess' :business-id='formBaseData.id' :url='attributeUrl' :entity='formBaseData' @complete='onComplete' :needInit='false' :variables='variables'></bpmn-form>
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
            <el-tab-pane label='变更部位' name='second'>
              <div class='WholeScroll over-box-css'>
                <div class='secondPanTop'>
                  <!--  <el-button type="primary" @click="useTree"
                               v-if="detailType!=='check'&&detailType !== 'checkCost' "
                               :disabled="detailType==='check'||detailType === 'checkCost'">引用工程部位
                    </el-button>-->
                  <el-button type='primary' @click='addTree' style="width: 250px;" v-if="detailType!=='check'&&detailType !== 'checkCost' " :disabled="detailType==='check'||detailType === 'checkCost'">引用工程部位
                  </el-button>
                </div>
                <div class='secondPanContent'>
                  <div class='contentTree WholeScroll'>
                    <p style='margin: 15px 0 0 15px'>变更部位划分</p>
                    <div style='width:100%;height: 40%;display: flex;align-items: center;justify-content: center' v-if='treeData.length===0'>
                      <img style='margin-right: 15px' src='@/assets/images/change/writeLogo.png' alt='#' />
                      <p style='color: #7D7D7D'>暂无变更部位,<br />请引用或增补需要变更的部位</p>
                    </div>
                    <div class='tree WhiteScroll' style='margin-top: 15px;height: 50vh;' v-if='treeData.length!==0'>
                      <el-tree :data='treeData' node-key='id' :default-expand-all='true' :check-on-click-node='true' :default-expanded-keys='[2, 3]' :default-checked-keys='[5]' :props='defaultProps' @node-click='handleNodeClick'>
                        <div class='custom-tree-node' slot-scope='{ node, data }' @click>
                          <div class='change-tree-div ' :title='data.name' :style="{color: data.createNode?'#409EFF':'#606266' }">
                            <i v-if='data.createNode' class='iconfont icon-xinzeng'></i>{{ data.name }}
                          </div>
                        </div>
                      </el-tree>

                    </div>
                  </div>
                  <div class='contentTable WholeScroll' style='min-width: 800px;'>
                    <div class='secondPanTop' style='display: flex;flex-direction: row;justify-content: space-between'>
                      <p style='margin: 15px 0 0 17px'>变更申请部位</p>
                    </div>
                    <div class='secondTable' style='margin-top: 15px;padding: 0 15px;'>
                      <el-row>
                        <el-col :span='12' class='form-table-leftTop noBottom'>
                          <el-form-item label='WBS名称' prop='WBSName' :label-width='formlabelWidth'>
                            {{ formDatamodify.name }}
                          </el-form-item>
                        </el-col>
                        <el-col :span='12' class='form-table-leftTop noBottom'>
                          <el-form-item label='是否增补' prop='addNode' :label-width='formlabelWidth'>
                            {{ formDatamodify.addNode === true ? '是' : '否' }}
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span='12' class='form-table-leftTop noBottom'>
                          <el-form-item label='起始桩号' prop='pileStart' :label-width='formlabelWidth'>
                            <span>{{ formDatamodify.pileStart }}</span>
                          </el-form-item>
                        </el-col>
                        <el-col :span='12' class='form-table-leftTop noBottom'>
                          <el-form-item label='结束桩号' prop='pileEnd' :label-width='formlabelWidth'>
                            <span>{{ formDatamodify.pileEnd }}</span>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span='12' class='form-table-leftTop'>
                          <el-form-item label='合同图号' prop='graphNoContract' :label-width='formlabelWidth'>
                            {{ formDatamodify.graphNoContract }}
                          </el-form-item>
                        </el-col>
                        <el-col :span='12' class='form-table-leftTop'>
                          <el-form-item label='变更合同图号' prop='graphNoChangeX' :label-width='formlabelWidth'>
                            {{ formDatamodify.graphNoChange }}
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </div>
                    <div class='secondPanTop' style='display: flex;flex-direction: row;justify-content: space-between;margin-top: 20px'>
                      <p style='margin: 15px 0 0 17px'>变更申请清单</p>
                      <el-button type='primary' style='margin-right: 15px' @click='selectworklist' v-if="detailType!=='check'&&detailType !== 'checkCost'&&this.formDatamodify.id">新增清单变更
                      </el-button>
                    </div>
                    <div style='margin: 15px 0 0 15px'>
                      <el-table :border='true' :header-cell-style="{padding: '8px 0',height:'48px',backgroundColor: '#f2f2f2',textAlign:'center',borderColor: '#d4d4d4'}" :cell-style="{padding: '6px 0',textAlign:'center',borderColor: '#d4d4d4'}" ref='multipleTable' :data='secondTableData' max-height='330' style='width: 100%; font-family: PingFangSC-Regular; font-size: 14px;'>
                        <el-table-column show-overflow-tooltip type='index' label='序号' width='50'>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip prop='code' label='清单编号' style='text-align: center' min-width='80'>
                          <template slot-scope='scope'>
                            <div style='text-align: center;'>{{ scope.row.code }}</div>
                          </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip prop='name' label='清单名称' style='text-align: center' min-width='130'>
                          <template slot-scope='scope'>
                            <div style='text-align: start;'>{{ scope.row.name }}</div>
                          </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip label='单价(万元)'>
                          <el-table-column show-overflow-tooltip prop='unitPrice' label='变更前' min-width='80'>
                            <template slot-scope='scope'>
                              <div style='text-align: center;'>{{ scope.row.unitPrice }}</div>
                            </template>
                          </el-table-column>
                          <el-table-column show-overflow-tooltip prop='afterChangePrice' label='变更后' min-width='90'>
                            <template slot-scope='scope'>
                              <div style='text-align: center;'>{{ scope.row.afterChangePrice }}
                              </div>
                            </template>
                          </el-table-column>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip label='数量'>
                          <el-table-column show-overflow-tooltip prop='quantity' label='分解量' min-width='80'>
                            <template slot-scope='scope'>
                              <div style='text-align: center;'>{{ scope.row.quantity }}</div>
                            </template>
                          </el-table-column>
                          <el-table-column show-overflow-tooltip prop='quantityChange' label='本方案分解量' min-width='100'>
                            <template slot-scope='scope'>
                              <span v-if="detailType==='check'||detailType === 'checkCost'">{{ scope.row.quantityThisPlan
                                }}</span>
                              <el-input v-model='scope.row.quantityThisPlan' v-else :disabled="detailType==='check'||detailType === 'checkCost'||scope.row.isCreateList" @input='quantityChange(scope.row,"thisPlan")'>
                              </el-input>
                            </template>
                          </el-table-column>
                          <el-table-column show-overflow-tooltip prop='quantityChange' label='变更增减' min-width='100'>
                            <template slot-scope='scope'>
                              <span v-if="detailType==='check'||detailType === 'checkCost'">{{ scope.row.quantityChange00
                                }}</span>
                              <el-input v-model='scope.row.quantityChange00' v-else :disabled="detailType==='check'||detailType === 'checkCost'" @input='quantityChange(scope.row,"00")' @blur='calChangeMoneyTotal'>
                              </el-input>
                            </template>
                          </el-table-column>
                          <el-table-column show-overflow-tooltip prop='quantityChange' label='总监办审核数量' min-width='100'>
                            <template slot-scope='scope'>
                              <span v-if="detailType==='check'||detailType === 'checkCost'">{{ scope.row.quantityChange01
                                }}</span>
                              <el-input v-model='scope.row.quantityChange01' v-else :disabled="detailType==='check'||detailType === 'checkCost' || !(formBaseData.taskKey == 'UserTask_0r5t11b'||formBaseData.taskKey == 'UserTask_06s1cq4')" @input='quantityChange(scope.row,"01")' @blur='calChangeMoneyTotal'>
                              </el-input>
                            </template>
                          </el-table-column>
                          <el-table-column show-overflow-tooltip prop='quantityChange' label='设计代表审核数量' min-width='100'>
                            <template slot-scope='scope'>
                              <span v-if="detailType==='check'||detailType === 'checkCost'">{{ scope.row.quantityChange02
                                }}</span>
                              <el-input v-model='scope.row.quantityChange02' v-else :disabled="detailType==='check'||detailType === 'checkCost'|| !(formBaseData.taskKey == 'UserTask_1uohb8z')" @input='quantityChange(scope.row,"02")' @blur='calChangeMoneyTotal'>
                              </el-input>
                            </template>
                          </el-table-column>
                          <el-table-column show-overflow-tooltip prop='quantityChange' label='跟踪审计审核数量' min-width='100'>
                            <template slot-scope='scope'>
                              <span v-if="detailType==='check'||detailType === 'checkCost'">{{ scope.row.quantityChange03
                                }}</span>
                              <el-input v-model='scope.row.quantityChange03' v-else :disabled="detailType==='check'||detailType === 'checkCost' || !(formBaseData.taskKey == 'UserTask_16ey8ht')" @input='quantityChange(scope.row,"03")' @blur='calChangeMoneyTotal'>
                              </el-input>
                            </template>
                          </el-table-column>
                          <el-table-column show-overflow-tooltip prop='quantityChange' label='项目公司审核数量' min-width='100'>
                            <template slot-scope='scope'>
                              <span v-if="detailType==='check'||detailType === 'checkCost'">{{ scope.row.quantityChange04
                                }}</span>
                              <el-input v-model='scope.row.quantityChange04' v-else :disabled="detailType==='check'||detailType === 'checkCost'||
                                        !(formBaseData.taskKey == 'UserTask_1rxomh9'
                                        && formBaseData.taskKey == 'UserTask_0vhdnib'
                                        && formBaseData.taskKey == 'UserTask_1bffova'
                                        && formBaseData.taskKey == 'UserTask_0758317'
                                        && formBaseData.taskKey == 'UserTask_1jhn8q0'
                                        && formBaseData.taskKey == 'UserTask_180fj9o'
                                        && formBaseData.taskKey == 'UserTask_0wufqmu'
                                        && formBaseData.taskKey == 'UserTask_0b226sp'
                                        && formBaseData.taskKey == 'UserTask_18wmazh'
                                        && formBaseData.taskKey == 'UserTask_0oe159t'
                                        )" @input='quantityChange(scope.row,"04")' @blur='calChangeMoneyTotal'>
                              </el-input>
                            </template>
                          </el-table-column>
                          <el-table-column show-overflow-tooltip prop='afterChangeNum' label='变更后' min-width='80'>
                            <template slot-scope='scope'>
                              <div style='text-align: center;'>{{ scope.row.quantityAfter }}
                              </div>
                            </template>
                          </el-table-column>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip label='金额(万元)'>
                          <el-table-column show-overflow-tooltip prop='changeDoller' label='变更增减' min-width='90'>
                            <template slot-scope='scope'>
                              <div style='text-align: center;'>{{ scope.row.moneyChange }}</div>
                            </template>
                          </el-table-column>
                          <el-table-column show-overflow-tooltip prop='afterChangeDoller' label='变更后' min-width='90'>
                            <template slot-scope='scope'>
                              <div style='text-align: center;'>{{ scope.row.moneyAfter }}
                              </div>
                            </template>
                          </el-table-column>

                        </el-table-column>

                        <el-table-column show-overflow-tooltip prop='createNode' label='是否增补' min-width='78'>
                          <template slot-scope='scope'>
                            <div style='text-align: center;'>{{
                                scope.row.addHook === true ? '是' :
                                    '否'
                              }}
                            </div>
                          </template>
                        </el-table-column>

                        <el-table-column show-overflow-tooltip label='操作' min-width='80' v-if="!(detailType==='check'||detailType === 'checkCost')">
                          <template slot-scope='scope'>
                            <template>
                              <el-popover placement='top' width='50' v-model='scope.row.deletePopoverShow'>
                                <p>确认删除吗？</p>
                                <div style='text-align: right; margin: 0'>
                                  <el-button type='primary' size='mini' @click="feeOneDeal(scope.$index, scope.row, 'delete')">
                                    确定
                                  </el-button>
                                  <el-button size='mini' type='text' @click='scope.row.deletePopoverShow = false'>取消
                                  </el-button>
                                </div>
                                <el-button v-if='scope.row.addHook' size='mini' type='danger' @click='clickHookDelete(scope.row)' slot='reference'>删除
                                </el-button>
                              </el-popover>
                            </template>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </div>
                <!--增补工程部位dialog-->
                <el-dialog width='60%' title='选择计量单元' class='addProjectDialog' :visible.sync='showAddWorkDialog' :close-on-click-modal='false' @close='closeDialogReset' v-dialog-drag append-to-body>
                  <div style='display: flex;flex-direction: row;' v-loading='autoExpandLoading'>
                    <div class='addProjectLeft'>
                      <p class='addProjectTittle' style='margin: 20px 0 0 15px'>标段WBS列表</p>
                      <div class='tree WhiteScroll'>
                        <el-tree ref='addTree' class='showTree' :data='frontData' show-checkbox node-key='id' highlight-current :expand-on-click-node='false' @node-click='handleTreeClick' :load='getchildNode' lazy :props="{
                           children: 'children',
                           label: 'name',
                           isLeaf: 'treeLeaf'
                          }">
                          <span class='custom-tree-node' slot-scope='{ node, data }'>
                            <span :style="{color: data.createNode?'rgb(64, 158, 255)':'#606266'}">{{ node.label }}</span>
                            <span>
                              <i class='iconfont icon-jia noHover-noBlue' :style="{display: data.canAdd?'unset':'none'}" @click='() => append(data,node)'></i>
                              <i class='iconfont icon-shanchu2 noHover-noBlue' :style="{display: data.createNode?'unset':'none'}" @click='() => remove(node, data)'></i>
                            </span>
                          </span>
                        </el-tree>
                      </div>
                    </div>
                    <div class='addProjectRight'>
                      <div class='secondTable'>
                        <div class='tableChild'>
                          <div class='FlexBoxParent child_right' style='width: 100%;'>
                            <div class='title' style='width: 17.5%;'>WBS名称</div>
                            <div class='FlexBoxChildren content' style='border-right: 1px solid rgba(125,125,125,0.4);'>
                              {{ formDataadd.name }}
                            </div>
                          </div>
                        </div>
                        <div class='tableChild'>
                          <div class='FlexBoxParent child_left'>
                            <div class='title'>起始桩号</div>
                            <div class='FlexBoxChildren content'>{{ formDataadd.pileStart }}</div>
                          </div>
                          <div class='FlexBoxParent child_right' style='width: 50%;'>
                            <div class='title'>结束桩号</div>
                            <div class='FlexBoxChildren content' style='border-right: 1px solid rgba(125,125,125,0.4);'>
                              {{ formDataadd.pileEnd }}
                            </div>
                          </div>
                        </div>
                        <!--<div class='tableChild'>
                          <div class='FlexBoxParent child_left'>
                            <div class='title'>合同图号</div>
                            <div class='FlexBoxChildren content'>{{ formDataadd.graphNoContract }}</div>
                          </div>
                          <div class='FlexBoxParent child_right'
                               style='width: 50%;'>
                            <div class='title'>变更合同图号</div>
                            <div class='FlexBoxChildren content'
                                 style='border-right: 1px solid rgba(125,125,125,0.4);'>
                              {{ formDataadd.graphNoChange }}
                            </div>
                          </div>
                        </div>-->
                        <div class='tableChild'>
                          <div class='FlexBoxParent child_right' style='width: 100%;'>
                            <div class='title' style='width: 17.5%;'>是否变更增补</div>
                            <div class='FlexBoxChildren content' style='border-right: 1px solid rgba(125,125,125,0.4);'>
                              {{ formDataadd.addNode === true ? '是' : '否' }}
                            </div>
                          </div>
                        </div>
                        <div class='tableChild'>
                          <div class='FlexBoxParent child_right' style='width: 100%;'>
                            <div class='title' style='width: 17.5%;'>备注</div>
                            <div class='FlexBoxChildren content' style='border-right: 1px solid rgba(125,125,125,0.4);border-bottom: 1px solid rgba(125,125,125,0.4);'>
                              {{ formDataadd.note }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div slot='footer' class='dialog-footer'>
                    <!--新建和编辑的暂存上报-->
                    <el-button size='small' type='primary' @click='chooseTheseTree'><i class='iconfont icon-icon_save'></i> 引 用
                    </el-button>
                    <el-button size='small' @click='showAddWorkDialog=false'><i class='iconfont icon-icon_cancel'></i> 取 消
                    </el-button>

                  </div>
                </el-dialog>
                <!--合同清单列表-->
                <el-dialog width='70%' title='施工清单列表' class='addProjectDialog' :visible.sync='showContractListDialog' :modal-append-to-body='true' :close-on-click-modal='false' @close='closeDialogReset' v-dialog-drag append-to-body>
                  <div>
                    <div class='head' style='margin-bottom: 15px'>
                      <div class='headLeft' style='display:flex;flex-direction: row;align-items: center'>
                        <p style='white-space: nowrap'>清单搜索:</p>
                        <el-input style='margin: 0 15px;width: 220px;' placeholder='请输入清单编号或名称' v-model='listSearch' clearable @input='filterContractListTable'></el-input>
                      </div>
                    </div>
                    <div class='body WholeScroll'>
                      <vxe-table v-if='showContractListDialog' border ref='xTable1' empty-text='没有更多数据了！' row-id='id' :data='contractListTablePaged' :checkbox-config='{ checkRowKeys: checkRowKeysIds,checkMethod:disabledFun }' @checkbox-change='selectChangeEvent' @checkbox-all='selectAllEvent'>
                        <vxe-column type='checkbox' width='60'></vxe-column>
                        <vxe-column field='code' title='清单编号'></vxe-column>
                        <vxe-column field='name' title='清单名称'></vxe-column>
                        <vxe-column field='unit' title='单位'></vxe-column>
                        <vxe-column field='unitPrice' title='单价(万元)'></vxe-column>
                        <vxe-column field='quantity' title='清单数量'></vxe-column>
                        <vxe-column field='amountUsed' title='已分解量'>
                          <template #default='{ row }'>
                            <div>{{ row.amountUsed }}</div>
                          </template>
                        </vxe-column>
                      </vxe-table>
                      <el-pagination small :current-page.sync='page.currentPage' :page-size='page.pageSize' layout='total, prev, pager, next' :total='page.total' @current-change='contractListTablePaginationChange'>
                      </el-pagination>
                    </div>
                  </div>
                  <div slot='footer' class='dialog-footer'>
                    <template v-if="detailType === 'build'||detailType === 'edit'">
                      <el-button size='small' type='primary' @click="handleClickDeal('selected')"><i class='iconfont icon-icon_save'></i> 确 定
                      </el-button>
                    </template>
                    <el-button size='small' @click="handleClickDeal('selectedcancel')"><i class='iconfont icon-icon_cancel'></i> 取 消
                    </el-button>
                  </div>
                </el-dialog>
                <!--新增下级节点-->
                <el-dialog width='35%' :visible.sync='showAddDialog' :modal-append-to-body='true' :close-on-click-modal='false' @close='closeDialogReset' v-dialog-drag append-to-body>
                  <span slot='title'>
                    <span>增补计量单元</span>
                  </span>
                  <div style='max-height: 600px;overflow-y: auto;padding: 0 15px;' class='WholeScroll'>
                    <el-form :model='addNewForm' ref='formBaseData2' :rules='formBaseRules'>
                      <el-row>
                        <el-col :span='24'>
                          <el-form-item class='' label='上级名称' prop='fatherName' :label-width='formlabelWidthTemp'>
                            <el-input size='small' v-model='addNewForm.pnodeName' placeholder='' disabled></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span='24'>
                          <el-form-item class='' label='计量单元名称' prop='rankNumber' :label-width='formlabelWidthTemp'>
                            <el-input size='small' v-model='addNewForm.name' placeholder=''></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span='24'>
                          <el-form-item class='' label='分部分项编码' prop='number' :label-width='formlabelWidthTemp'>
                            <el-input size='small' v-model='addNewForm.code' placeholder='请输入分部分项编码'></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span='24'>
                          <el-form-item class='' label='起始桩号' prop='name' :label-width='formlabelWidthTemp'>
                            <el-input size='small' v-model='addNewForm.pileStart' placeholder='请输入起始桩号'></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span='24'>
                          <el-form-item class='' label='结束桩号' prop='name' :label-width='formlabelWidthTemp'>
                            <el-input size='small' v-model='addNewForm.pileEnd' placeholder='请输入结束桩号'></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <!-- <el-row>
                        <el-col :span='24'>
                          <el-form-item class='' label='变更合同图号' prop='name' :label-width='formlabelWidthTemp'>
                            <el-input size='small' v-model='addNewForm.graphNoChange'
                                      placeholder='请输入变更合同图号'></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>-->
                      <el-row>
                        <el-col :span='24'>
                          <el-form-item class='' label='备注' prop='remark' :label-width='formlabelWidthTemp'>
                            <el-input v-model='addNewForm.note' type='textarea' :autosize='{ minRows: 6 }'></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-form>
                  </div>
                  <div slot='footer' class='dialog-footer'>
                    <!--新建和编辑的暂存上报-->
                    <template>
                      <el-button size='small' type='primary' @click='submitAdd'><i class='iconfont icon-icon_save'></i> 确 定
                      </el-button>
                    </template>
                    <el-button size='small' @click='handleCancel'><i class='iconfont icon-icon_cancel'></i> 取 消
                    </el-button>
                  </div>
                </el-dialog>

              </div>
            </el-tab-pane>
            <el-tab-pane label='其他资料' name='third'>
              <div style='max-height: 580px;overflow-y: auto;padding:  0 15px;' class='WholeScroll'>
                <el-row>
                  <el-col :span='12'>
                    <el-form-item label='原设计图编号' prop='graphNoOld' :label-width='formlabelWidth'>
                      <el-input v-model='formBaseData.graphNoOld' placeholder='请输入原设计图编号' :disabled="detailType === 'check' || detailType === 'approve'">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='12'>
                    <el-form-item label='变更设计图编号' prop='graphNoChange' :label-width='formlabelWidth'>
                      <el-input v-model='formBaseData.graphNoChange' placeholder='请输入变更设计图编号' :disabled="detailType === 'check' || detailType === 'approve'">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span='12'>
                    <el-form-item label='变更申请人姓名' prop='applierName' :label-width='formlabelWidth'>
                      <el-input v-model='formBaseData.applierName' placeholder='请输入变更申请人姓名' :disabled="detailType === 'check' || detailType === 'approve'">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='12'>
                    <el-form-item label='变更申请人职务' prop='applierPosition' :label-width='formlabelWidth'>
                      <el-input v-model='formBaseData.applierPosition' placeholder='请输入变更申请人职务' :disabled="detailType === 'check' || detailType === 'approve'">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span='24'>
                    <el-form-item label='变更申请人所在单位' prop='applierCompanyName' :label-width='formlabelWidth'>
                      <el-input v-model='formBaseData.applierCompanyName' placeholder='请输入变更申请人所在单位' :disabled="detailType === 'check' || detailType === 'approve'">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span='24'>
                    <el-form-item label='拟采用的设计方案或施工方案的描述' prop='planToUse' :label-width='formlabelWidth'>
                      <el-input type='textarea' :rows='6' placeholder='请输入拟采用的设计方案或施工方案的描述' v-model='formBaseData.planToUse' :disabled="detailType === 'check' || detailType === 'approve'"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span='24'>
                    <el-form-item label='工程量计算说明' prop='calMethods' :label-width='formlabelWidth'>
                      <el-input type='textarea' :rows='6' placeholder='请输入工程量计算说明' v-model='formBaseData.calMethods' :disabled="detailType === 'check' || detailType === 'approve'"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span='24'>
                    <el-form-item label='工程量计算内容' prop='calContent' :label-width='formlabelWidth'>
                      <el-input type='textarea' :rows='6' placeholder='请输入工程量计算内容' v-model='formBaseData.calContent' :disabled="detailType === 'check' || detailType === 'approve'"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
            <el-tab-pane label='审批记录' name='fourth' v-if="detailType!=='build'&&formBaseData.procInstId">
              <wf-process :inst-id='formBaseData.procInstId' :url='urlProcess' />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-form>

    </div>

    <div slot='footer' class='dialog-footer' style='padding-top: 80px'>
      <pop-btn ref='btn' proc-def-key='serviceProcess' :business-id='formBaseData.id' :readonly='readonly' :task-id='formBaseData.taskId' :showAll='isShowBpmn' @save='onSave' @approve='onApprove' @apply='onApply' @cancel='cancel' />
    </div>
  </el-dialog>
</template>
<script>
import {
  tableRowStyleGol,
  tableCellStyleGol,
  tableHeaderCellStyleGol
} from '@/utils/publicFun'
import msgUtil from '@/utils/msgUtil'
import crudDict from '@/api/system/dict'
import service from '@/api/buss/modifyFeeApply'
import projectSectionInfo from '@/api/buss/common'
import BpmnForm from '@/components/ExtBpmn/ExtForm/bpmn-form'
import WfProcess from '@/components/WorkFlow/process/index'
import { v4 as uuidv4 } from 'uuid'
import startMixin from '@/mixins/wfStartMixin'
import approveMixin from '@/mixins/wfApproveMixin'
import PopBtn from '@/components/ExtBpmn/Btn/index'
// import JsonData from './dataMock'
import Dict from '@/api/system/dict'
import modifyapplyunitprice from '@/api/buss/modifyapplyunitprice'
import designChangeApply from '@/api/buss/designChangeApply'
import safetyInspection from '@/api/buss/sceneTentative'

export default {
  name: 'withinProject-detail',
  props: {
    postDetail: {
      type: Object,
      default: {
        show: false,
        type: 'build',
        params: {}
      }
    }
  },
  mixins: [startMixin, approveMixin],
  components: {
    WfProcess,
    BpmnForm,
    PopBtn
  },
  watch: {
    postDetail(value) {
      // 显示详情弹窗
      this.formShow = value.show
      // 初始化窗口参数
      this.activeName = 'first'
      this.frontData = []
      this.treeData = []
      this.secondTableData = []
      // 详情类型
      this.detailType = value.type
      if (this.detailType == 'build') {
        this.isShowBpmn = true
        this.title = '新增变更费用申报'
        this.projectId = value.projectId ? value.projectId : ''
        this.sectionId = value.sectionId ? value.sectionId : ''
        this.$nextTick(this.getInitData(this.initBtn))
        this.getRelateFromLists();
      } else if (this.detailType == 'check') {
        this.title = '查看详情'
      } else if (this.detailType == 'edit') {
        this.isShowBpmn = true
        this.title = '编辑变更费用申报'
      } else if (this.detailType == 'approve') {
        this.isShowBpmn = true
        this.title = '审核变更费用申报'
      } else {
        this.title = ''
      }
      this.resetFileTable()
      this.detailId = value.detailId ? value.detailId : ''
      if (this.detailType !== 'build') {
        this.getDetail()
      } else {
        this.projectId = value.projectId ? value.projectId : ''
        this.sectionId = value.sectionId ? value.sectionId : ''
      }
      this.getModifyLevel()

    }
  },
  data() {
    return {
      loading: false,
      //变更部位 变量 start
      showAddWorkDialog: false,
      showNodeTable: true,
      formDataadd: {//新增工程部位的WBS信息显示
        id: '',//id
        name: '', // 名称
        code: '', // 编号
        pileStart: '', // 起始桩号
        pileEnd: '', // 结束桩号
        money: '', // 金额
        graphCode: '',//合同图号
        createNode: '',//是否增补
        addHook: '',//是否增补节点，仅作为标志用，不参与逻辑判断
        note: '',//备注
        graphNoChange: ''//变更合同图号
      },
      frontData: [],
      showContractListDialog: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'menuName'
      },
      showAddDialog: false,
      //新增计量部位
      addNewForm: {
        id: '',
        name: '',
        code: '',
        pileStart: '',
        pileEnd: '',
        graphNoContract: '',
        graphNoChange: '',
        treeLevel: -1,
        treeLeaf: false,
        addNode: true,
        otherApplyNode: false,
        pnodeName: ''
      },
      listSearch: '',
      contractListTablePaged: [],
      checkRowKeysIds: [],
      checkRowKeysAll: [],
      contractListTable: [],
      contractListTableFilter: [],
      secondTableData: [],
      fromTableData: [],
      page: {
        currentPage: '',
        pageSize: 10,
        total: ''
      },
      formDatamodify: {
        id: '',//id
        name: '', // 名称
        code: '', // 编号
        pileStart: '', // 起始桩号
        pileEnd: '', // 结束桩号
        money: '', // 金额
        graphCode: '',//合同图号
        createNode: '',//是否增补
        addHook: '',//是否增补节点，仅作为标志用，不参与逻辑判断
        note: '',//备注
        graphNoChange: ''//变更合同图号
      },
      changePicNum: '',
      //变更部位 变量 end


      sonTreeData: [],
      isFirst: true,
      // 向详情子组件的传值
      treeEditDialogData: {
        show: false,
        nowTreeData: []
      },
      readonly: false,
      variables: {},
      wfNode: {},
      attributeUrl: 'buss-measure/modifyFeeApply/node/attribute',
      urlProcess: 'buss-measure/modifyFeeApply/process',
      isShowBpmn: false,
      isMultiple: false,
      projectName: '',
      projectId: '',
      tableRowStyleName: tableRowStyleGol,
      tableCellStyleName: tableCellStyleGol,
      tableHeaderCellStyleName: tableHeaderCellStyleGol,
      isLoading: false,
      detailType: 'build', // 详情类型 build新建 check不可编辑查看 edit编辑
      detailId: '', // 当前详情的id
      formShow: false, // 表单展示
      formlabelWidth: '165px', // 表单左侧标题宽度
      formlabelWidthTemp: '130px', // 表单左侧标题宽度
      activeName: 'first',
      title: '变更费用申报',
      actionType: '',
      formBaseData: {
        'code': '',
        'codeSerial': '',
        'codeFlowNum': null,
        'moneyPlan': null,
        'modifyLevel': '',
        'moneyReport': null,
        'reportDate': null,
        'formIdDesign': '',
        'formIdUnitPrice': '',
        'formIdSurveyFirst': '',
        'formIdSurveyFirstDate': null,
        'changePart': '',
        'pileNo': '',
        'changeContent': '',
        'changeReason': '',
        'changeTechCompare': '',
        'graphNoOld': '',
        'graphNoChange': '',
        'applierName': '',
        'applierPosition': '',
        'applierCompanyName': '',
        'planToUse': '',
        'calMethods': '',
        'calContent': ''
      },
      fileSystem: {
        attachId: '',
        sys: 'buss',
        module: 'supervisornoticeca',
        part: ['one']
      }, // 文件系统的参数
      selectList: {
        designFormList: [],
        unitPriceList: [],
        requestFormList: [],
        priceSourceList: [{
          name: '执行中标价',
          id: '1'
        }, {
          name: '参照投标价调整',
          id: '2'
        }, {
          name: '按合同重新组价',
          id: '3'
        }],
        changeLevel: []
      },
      costArr: [],
      currentCost: '',
      currentCostId: '',
      currentCostIndex: '',
      buildUnitTable: [
        {
          stuffName: '设计变更现场初步审查表',
          part: 'partOne',
          file: [{ realName: '' }],
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '设计变更领导小组审查意见表',
          file: [{ realName: '' }],
          part: 'partTwo',
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '设计变更审核签认表',
          file: [{ realName: '' }],
          part: 'partThree',
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '设计变更通知单',
          file: [{ realName: '' }],
          part: 'partFour',
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '设计变更令',
          file: [{ realName: '' }],
          part: 'partFive',
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '原设计图纸',
          file: [{ realName: '' }],
          part: 'partSix',
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '变更设计图纸',
          file: [{ realName: '' }],
          part: 'partSeven',
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '图片资料',
          file: [{ realName: '' }],
          part: 'partEight',
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '其他',
          file: [{ realName: '' }],
          part: 'partOther',
          isNeed: false,
          loading: false,
          isMulti: true
        }
      ],
      formBaseRules: {
        formIdDesign: [
          {
            required: true,
            message: '请选择关联设计变更申请单',
            trigger: 'blur'
          }
        ],
        formIdUnitPrice: [
          {
            required: true,
            message: '请选择关联新增缺项单价',
            trigger: 'blur'
          }
        ],
        formIdSurveyFirst: [
          {
            required: true,
            message: '请选择关联现场初步审查',
            trigger: 'blur'
          }
        ],
        // formIdSurveyFirstDate: [
        //   {
        //     required: true,
        //     message: '请填写现场初步审查日期',
        //     trigger: 'blur'
        //   }
        // ],
        moneyPlan: [
          {
            required: true,
            message: '请输入预估变更金额',
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: '请填写变更编号',
            trigger: 'blur'
          }
        ],
        pileNo: [
          {
            required: true,
            message: '请输入里程桩号',
            trigger: 'blur'
          }
        ],
        changePart: [
          {
            required: true,
            message: '请输入设计变更项目(部位)',
            trigger: 'blur'
          }
        ],
        chooseModifyLevel: [
          {
            required: true,
            message: '请先择变更等级',
            trigger: 'blur'
          }
        ],
        moneyReport: [
          {
            required: true,
            message: '请输入变更申报金额',
            trigger: 'blur'
          }
        ],
        reportDate: [
          {
            required: true,
            message: '请输入申报日期',
            trigger: 'blur'
          }
        ],
        changeContent: [
          {
            required: true,
            message: '请输入设计变更内容',
            trigger: 'blur'
          }
        ],
        changeReason: [
          {
            required: true,
            message: '请输入设计变更理由',
            trigger: 'blur'
          }
        ],
        changeTechCompare: [
          {
            required: true,
            message: '请输入设计变更技术经济比较',
            trigger: 'blur'
          }
        ],
        graphNoChange: [
          {
            required: true,
            message: '请输入变更设计图编号',
            trigger: 'blur'
          }
        ],
        applierName: [
          {
            required: true,
            message: '请输入变更申请人姓名',
            trigger: 'blur'
          }
        ],
        applierPosition: [
          {
            required: true,
            message: '请输入变更申请人职务',
            trigger: 'blur'
          }
        ],
        applierCompanyName: [
          {
            required: true,
            message: '请输入变更申请人所在单位',
            trigger: 'blur'
          }
        ],
        planToUse: [
          {
            required: true,
            message: '请输入拟采用的设计方案或施工方案的描述',
            trigger: 'blur'
          }
        ],
        calMethods: [
          {
            required: true,
            message: '请输入工程量计算说明',
            trigger: 'blur'
          }
        ],
        calContent: [
          {
            required: true,
            message: '请输入工程量计算内容',
            trigger: 'blur'
          }
        ]
      },
      // 当前正在编辑的节点对象
      nowWbsNodeObj: null,
      nodeToAutoSelQueue: [],
      autoExpandLoading: false
    }
  },
  mounted() {

  },
  methods: {
    clickHookDelete(row) {
      this.$set(row, 'deletePopoverShow', true)
    },
    /**
     * 获取下拉关联项列表
     */
    getRelateFromLists() {
      this.getRelateFromUnitPrice();
      this.getRelateFromSceneTentative();
      this.getRelateFromDesignChange();
    },
    /**
     * 获取单价变更
     */
    getRelateFromUnitPrice() {
      this.selectList.unitPriceList = []
      this.$httpGet(`buss-measure/modifyapplyunitprice/getListForCostSel?sid=${this.sectionId}`).then(res => {
        if (res.status === 1) {
          //新增清单变更
          this.selectList.unitPriceList = res.data
        } else {
          this.$messageError(res.message)
        }
      }).catch(res => {
        console.log('请求出现错误', res)
        this.$messageError('请求出现错误')
      })
    },
    /**
     * 获取现场初步勘察
     */
    getRelateFromSceneTentative() {
      this.selectList.requestFormList = []
      this.$httpGet(`buss-measure/sceneTentative/getListForCostSel?sid=${this.sectionId}`).then(res => {
        if (res.status === 1) {
          //新增清单变更
          this.selectList.requestFormList = res.data
        } else {
          this.$messageError(res.message)
        }
      }).catch(res => {
        console.log('请求出现错误', res)
        this.$messageError('请求出现错误')
      })
    },
    /**
     * 获取设计变更申请
     */
    getRelateFromDesignChange() {
      this.selectList.designFormList = []
      this.$httpGet(`buss-measure/designchangeapply/getListForCostSel?sid=${this.sectionId}`).then(res => {
        if (res.status === 1) {
          //新增清单变更
          this.selectList.designFormList = res.data
        } else {
          this.$messageError(res.message)
        }
      }).catch(res => {
        console.log('请求出现错误', res)
        this.$messageError('请求出现错误')
      })
    },
    /**
     * 重设文件表
     */
    resetFileTable() {
      this.buildUnitTable = [
        {
          stuffName: '设计变更现场初步审查表',
          part: 'partOne',
          file: [{ realName: '' }],
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '设计变更领导小组审查意见表',
          file: [{ realName: '' }],
          part: 'partTwo',
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '设计变更审核签认表',
          file: [{ realName: '' }],
          part: 'partThree',
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '设计变更通知单',
          file: [{ realName: '' }],
          part: 'partFour',
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '设计变更令',
          file: [{ realName: '' }],
          part: 'partFive',
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '原设计图纸',
          file: [{ realName: '' }],
          part: 'partSix',
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '变更设计图纸',
          file: [{ realName: '' }],
          part: 'partSeven',
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '图片资料',
          file: [{ realName: '' }],
          part: 'partEight',
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '其他',
          file: [{ realName: '' }],
          part: 'partOther',
          isNeed: false,
          loading: false,
          isMulti: true
        }
      ]
    },
    /**
     * 获取变更等级
     */
    getModifyLevel() {
      Dict.getListByPcode('changeLevel').then(res => {
        this.selectList.changeLevel = res.data
      })
    },
    /**
     * 计算被填写行的数量和金额
     * ↓所有逻辑计算在后端，除了这个
     */
    quantityChange(row, type) {
      switch (type) {
        case '00':
          row.quantityChange = row.quantityChange04 = row.quantityChange03 = row.quantityChange02 = row.quantityChange01 = row.quantityChange00
          break
        case '01':
          row.quantityChange = row.quantityChange04 = row.quantityChange03 = row.quantityChange02 = row.quantityChange01
          break
        case '02':
          row.quantityChange = row.quantityChange04 = row.quantityChange03 = row.quantityChange02
          break
        case '03':
          row.quantityChange = row.quantityChange04 = row.quantityChange03
          break
        case '04':
          row.quantityChange = row.quantityChange04
          break
      }
      if (row.quantityThisPlan != null && row.quantityChange != null) {
        if (Number(row.quantity) <= Number(row.quantityThisPlan)) {
          row.quantityThisPlan = row.quantity
          this.$messageWarning('本方案分解量不能大于分解量')
        }
        row.quantityAfter = Number.parseFloat(row.quantityThisPlan) + Number.parseFloat(row.quantityChange)
        row.moneyBefore = Number.parseFloat(row.quantityThisPlan) * Number.parseFloat(row.unitPrice)
        row.moneyAfter = Number.parseFloat(row.quantityAfter) * Number.parseFloat(row.unitPrice)
        row.moneyChange = Number.parseFloat(row.moneyAfter) - Number.parseFloat(row.moneyBefore)
      }
    },
    calChangeMoneyTotal() {
      let param = {
        detailType: this.detailType,
        formBaseData: this.formBaseData,
        pid: this.formDatamodify.id,
        requestTreeLevel: this.formDatamodify.treeLevel
      }
      this.$httpPost('buss-measure/modifyFeeApply/calChangeMoneyTotal', param).then(res => {
        if (res.status === 1) {
          //新增清单变更
          this.formBaseData.moneyReport = res.data
        } else {
          this.$messageError(res.message)
        }
      }).catch(res => {
        console.log('请求出现错误', res)
        this.$messageError('请求出现错误')
      })
    },
    /**
     * 后端初始化一部分数据
     * @param cb
     */
    getInitData(cb) {
      this.$httpGet('buss-measure/modifyFeeApply/getInitData?sid=' + this.sectionId).then(res => {
        if (res.status === 1) {
          this.formBaseData = res.data
          if (cb) cb()
        } else {
          this.$messageError(res.message)
        }
      }).catch(res => {
        console.log('请求出现错误', res)
        this.$messageError('获取初始数据请求出现错误')
      })
    },
    handleTreeClick(val) {
      console.log(val, 'val')
      this.formDataadd = val
    },
    append(data, node) {
      this.showAddDialog = true
      this.chooseTreeData = data
      this.addNewForm.pnodeName = this.chooseTreeData.name
      this.nowWbsNodeObj = node
    },
    submitAdd() {
      //  检查本层级内名称重复
      if (this.chooseTreeData.children) {
        for (let node of this.chooseTreeData.children) {
          if (node.name == this.addNewForm.name) {
            this.$messageError('本层级内节点名称不可重复，请使用其它名称')
            return
          }
        }
      }
      this.addNewForm.id = uuidv4().replaceAll('-', '')
      this.addNewForm.code = uuidv4().replaceAll('-', '')
      this.addNewForm.addNode = true
      this.addNewForm.treeLeaf = true
      this.addNewForm.canAdd = true
      this.addNewForm.pid = this.chooseTreeData.code
      this.addNewForm.treeLevel = this.chooseTreeData.treeLevel + 1
      this.addNewForm.contractId = this.chooseTreeData.contractId

      let obj = JSON.parse(JSON.stringify(this.addNewForm))
      if (!this.chooseTreeData.children) {
        this.$set(this.chooseTreeData, 'children', [])
      }
      this.chooseTreeData.children.push(obj)
      this.chooseTreeData.treeLeaf = false
      this.submitToDetail()
      // 懒加载刷新
      if (this.nowWbsNodeObj) {
        this.nowWbsNodeObj.loaded = false
        this.nowWbsNodeObj.expand()
      }
      this.handleCancel()
    },
    submitToDetail() {
      let foundNode = false
      for (let node of this.formBaseData.wbsResolveList) {
        //  当前选中的节点父节点变更了是否子节点的情况
        if (node.id == this.chooseTreeData.id) {
          node.treeLeaf = this.chooseTreeData.treeLeaf
        }
        //  修改了当前节点属性的情况
        if (node.id == this.addNewForm.id) {
          node.name = this.addNewForm.name
          node.code = this.addNewForm.code
          node.pileStart = this.addNewForm.pileStart
          node.pileEnd = this.addNewForm.pileEnd
          node.graphNoContract = this.addNewForm.graphNoContract
          node.graphNoChange = this.addNewForm.graphNoChange
          node.treeLevel = this.addNewForm.treeLevel
          node.addNode = this.addNewForm.addNode
          node.otherApplyNode = this.addNewForm.otherApplyNode
          node.pnodeName = this.addNewForm.pnodeName

          foundNode = true
        }
      }
      //  插入的情况
      if (!foundNode) {
        this.formBaseData.wbsResolveList.push(JSON.parse(JSON.stringify(this.addNewForm)))
      }
    },
    handleCancel() {
      this.addNewForm = {
        id: '',
        name: '',
        code: '',
        pileStart: '',
        pileEnd: '',
        graphNoContract: '',
        graphNoChange: '',
        treeLevel: -1,
        treeLeaf: false,
        addNode: true,
        otherApplyNode: false,
        pnodeName: ''
      }
      this.showAddDialog = false
    },
    remove(node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)
      this.formDataadd = {
        id: '',//id
        name: '', // 名称
        code: '', // 编号
        pileStart: '', // 起始桩号
        pileEnd: '', // 结束桩号
        money: '', // 金额
        graphCode: '',//合同图号
        createNode: '',//是否增补
        addHook: '',//是否增补节点，仅作为标志用，不参与逻辑判断
        note: '',//备注
        graphNoChange: ''//变更合同图号
      }
    },
    chooseTheseTree() {
      this.getInfo()
      this.$set(this, 'showAddWorkDialog', false)
    },
    getInfo() {
      const getC = this.$refs.addTree.getCheckedNodes()
      const getHC = this.$refs.addTree.getHalfCheckedNodes()
      let selected_nodes = getHC.concat(getC)
      let selected_ids = new Set() // 记录选中的节点tree_id
      let used_ids = new Set() // 记录已经查询过的节点
      // 遍历初始化selected_ids
      for (let node of selected_nodes) {
        selected_ids.add(node.$treeNodeId)
      }
      // 最终的结果数据用一个根节点存储, 为了对齐递归的数据结构
      let root_node = {
        treeNodeId: -1,
        children: []
      }
      // 添加给parent_node节点一个新节点 node
      // 注意:node 的类型是原始的 tree 节点
      // 而parent_node 的类型是真正的结果节点
      function AddNode(node, parent_node) {
        if (
          !selected_ids.has(node.$treeNodeId) ||
          used_ids.has(node.$treeNodeId)
        ) {
          return
        }
        used_ids.add(node.$treeNodeId) // 加过的要存入 used_ids 做标记
        let real_node = {
          treeNodeId: node.$treeNodeId,
          children: [],
          name: node.name,
          id: node.id,
          treeLeaf: node.treeLeaf
          // 存储一下节点的数据
        }
        // // 添加子节点
        if (node.children) {
          for (let child_node of node.children) {
            AddNode(child_node, real_node)
          }
        }
        if (real_node.children.length === 0) {
          delete real_node.children
        }
        parent_node.children.push(real_node)
      }

      for (let node of selected_nodes) {
        AddNode(node, root_node)
      }
      let result = root_node.children
      console.log(result)
      this.$set(this, 'treeData', result)
      this.wbsresolveChangeDataClear(selected_nodes)
    },
    /**
     * 确认wbs数据选择项时，根据本次选中的部位，清理先前选中的部位对应的清单数据
     * @param param
     * @return
     */
    wbsresolveChangeDataClear(wbs) {
      this.formBaseData.wbsResolveList = wbs
      let param = {
        detailType: this.detailType,
        formBaseData: this.formBaseData,
        pid: this.formDatamodify.id,
        requestTreeLevel: this.formDatamodify.treeLevel
      }
      this.$httpPost('buss-measure/modifyFeeApply/wbsresolveChangeDataClear', param).then(res => {
        if (res.status === 1) {
          //新增清单变更
          this.formBaseData.wbshookList = res.data.wbshookList
          this.formBaseData.wbsResolveList = res.data.wbsResolveList
        } else {
          this.$messageError(res.message)
        }
      }).catch(res => {
        console.log('请求出现错误', res)
        this.$messageError('请求出现错误')
      })
    },
    addTree() {
      this.showAddWorkDialog = true
      if (!this.frontData || this.frontData.length == 0) {
        this.getTreeTopNode(() => {
          this.$nextTick(() => {
            //  还原树选择项
            if (this.detailType == 'edit') {
              this.recoverTreeData()
            }
          })
        })
      }
    },
    getTreeTopNode(cb) {
      let param = {
        detailType: this.detailType,
        formBaseData: this.formBaseData,
        pid: null,
        requestTreeLevel: 0
      }
      this.$httpPost('buss-measure/modifyFeeApply/getChildNode', param).then(res => {
        if (res.status === 1) {
          this.frontData = res.data
          this.$forceUpdate()
          if (cb) cb()
        } else {
          this.$messageError(res.message)
        }
      }).catch(res => {
        console.log('请求出现错误', res)
        this.$messageError('请求出现错误')
      })
    },
    getchildNode(node, resolve) {
      if (!node.data.code) {
        return
      }
      let param = {
        detailType: this.detailType,
        formBaseData: this.formBaseData,
        pid: node.data.code,
        requestTreeLevel: node.data.treeLevel
      }
      this.$httpPost('buss-measure/modifyFeeApply/getChildNode', param).then(res => {
        if (res.status === 1) {
          node.data.children = res.data
          resolve(res.data)
        } else {
          this.$messageError(res.message)
        }
      }).catch(res => {
        console.log('请求出现错误', res)
        this.$messageError('请求出现错误')
      })
    },
    treeCheck(data, list) {
      let thisNode = this.$refs.addTree.getNode(data.id),
        keys = [data] // 获取已勾选节点的key值
      if (thisNode.checked) {
        // 当前节点若被选中
        for (let i = thisNode.level; i > 1; i--) {
          // 当前子节点选中，取消勾选父节点
          this.$refs.addTree.setChecked(thisNode.parent, false)
          // 判断是否有父级节点
          if (!thisNode.parent.checked) {
            // 父级节点未被选中，则将父节点替换成当前节点，往上继续查询，并将此节点key存入keys数组
            thisNode = thisNode.parent
            keys.unshift(thisNode.data)
          }
        }
      }
      console.log(keys, 'keyssssssssssss')
    },
    feeOneDeal(index, item, flag) {
      console.log('点击删除后', item)
      //删除table 数据的时候 ，同步删除dialog 里面的勾选数组
      for (let i in this.checkRowKeysAll) {
        if (this.checkRowKeysAll[i].id == item.id) {
          this.checkRowKeysAll.splice(i, 1)
        }
      }
      this.secondTableData.splice(index, 1)
      let totalIndex = this.formBaseData.wbshookList.indexOf(item)
      if (totalIndex != -1) {
        this.formBaseData.wbshookList.splice(totalIndex, 1)
      }
      //  如果当前wbs节点下的挂接为空，允许新增下级节点。
      if (this.secondTableData.length == 0) {
        this.enableWbsAddChild(this.formDatamodify)
      }
    },
    deletewbshook(item) {
      item.amountchange = parseFloat(0.0 - item.amountusednow)
      this.$httpPost('buss/modifynodewbshook/hookdelete',
        {
          hookId: item.hookid,
          wbsId: this.nodeid
        }).then(res => {
          if (res.data.status === 1) {
            this.$messageSuccess('删除成功')
          } else {
            this.$messageError(res.data.message)
          }
        }).catch(res => {
          console.log('请求出现错误', res)
          this.$messageError('detail提交详情请求失败')
        })
    },
    handleNodeClick(val) {
      if (val.treeLeaf) {
        //如果是叶子节点
        this.formDatamodify = val
        this.getWbsHook()
      }

    },
    getWbsHook() {
      let param = {
        detailType: this.detailType,
        formBaseData: this.formBaseData,
        pid: this.formDatamodify.id,
        requestTreeLevel: this.formDatamodify.treeLevel
      }
      this.$httpPost('buss-measure/modifyFeeApply/getHookByWbsId', param).then(res => {
        if (res.status === 1) {
          this.secondTableData = res.data
          // 将当前编辑的数据对象关联到主表上，修改时同时修改主表上的数据
          this.hookRelateToFormBaseData()
        } else {
          this.$messageError(res.message)
        }
      }).catch(res => {
        console.log('请求出现错误', res)
        this.$messageError('请求出现错误')
      })
    },
    // 将当前编辑的数据对象关联到主表上，修改时同时修改主表上的数据
    hookRelateToFormBaseData() {
      let hkMap = {}
      this.formBaseData.wbshookList.forEach(hk => {
        hkMap[hk.wbsId + '~' + hk.workListId] = hk
      })
      this.secondTableData.forEach(hk => {
        hkMap[hk.wbsId + '~' + hk.workListId] = hk
      })
      this.formBaseData.wbshookList = []
      for (let k in hkMap) {
        this.formBaseData.wbshookList.push(hkMap[k])
      }
    },
    selectedHook() {
      console.log(this.checkRowKeysAll)
      let arr = []
      let arrTable = this.secondTableData.map(it => it.id)

      for (let i in this.checkRowKeysAll) {
        let it = this.checkRowKeysAll[i]
        if (it && !arrTable.includes(it.id)) {
          //如果已存在的table里面 没有现在已选中的id  就推进去  并设置可删除的布尔值
          it.addHook = true
          it.deletePopoverShow = false
          arr.push(it)
          this.formBaseData.wbshookList.push(
            {
              wbsId: this.formDatamodify.id,
              workListId: it.id,
              addHook: true
            })
          this.getWbsHook()
        }
      }
      this.secondTableData.push(...arr)
      this.handleClickDeal('selectedcancel')
      //  查找所属的wbs节点，设置该节点不可再新增下级节点
      this.disableWbsAddChild(this.formDatamodify)
    },
    // 设置该节点不可再新增下级节点
    disableWbsAddChild(wbs) {
      wbs.canAdd = false
      let checkedNodes = this.$refs.addTree.getCheckedNodes()
      checkedNodes.forEach(node => {
        if (node.id == wbs.id) {
          node.canAdd = false
        }
      })
    },
    // 设置该节点可再新增下级节点
    enableWbsAddChild(wbs) {
      wbs.canAdd = true
      let checkedNodes = this.$refs.addTree.getCheckedNodes()
      checkedNodes.forEach(node => {
        if (node.id == wbs.id) {
          node.canAdd = true
        }
      })
    },
    selectworklist() {
      //把外面的table id 取出来 赋值给 已勾选的id 数组
      this.showContractListDialog = true
      this.checkRowKeysIds = this.secondTableData.map(it => {
        if (it && it.id) {
          return it.id
        }
      })
      let param = {
        detailType: this.detailType,
        formBaseData: this.formBaseData,
        pid: this.formDatamodify.id,
        requestTreeLevel: this.formDatamodify.treeLevel
      }
      this.$httpPost('buss-measure/modifyFeeApply/getWorklistsForSel', param).then(res => {
        if (res.status === 1) {
          //新增清单变更
          this.contractListTable = res.data
          console.log(this.contractListTable)

          let arr = []
          for (let i = 0; i < 10; i++) {
            arr.push(this.contractListTable[i])
          }
          this.contractListTablePaged = arr
          this.page.total = res.data.length
          this.page.currentPage = 1
          this.page.pageSize = 10
        } else {
          this.$messageError(res.message)
        }
      }).catch(res => {
        console.log('请求出现错误', res)
        this.$messageError('请求出现错误')
      })


    },
    contractListTablePaginationChange(index) {
      //分页切换动作  取成长度为10的数组
      let arr = []
      if (this.listSearch) {
        //有值 就用filter 数组
        for (let i = index * 10 - 10; i < index * 10; i++) {
          arr.push(this.contractListTableFilter[i])
        }
      } else {
        //如果搜索框没值 就用原数组
        for (let i = index * 10 - 10; i < index * 10; i++) {
          arr.push(this.contractListTable[i])
        }
      }
      this.contractListTablePaged = arr
      console.log(this.contractListTable)
      this.$nextTick(() => {
        this.$refs.xTable1.setCheckboxRow(this.checkRowKeysAll, true)
      })
    },
    filterContractListTable(val) {
      console.log(val, this.listSearch, 'listSearch')
      //过滤原table 筛选
      this.contractListTableFilter = this.contractListTable.filter(it => {
        if (it.code.indexOf(val) > -1 || it.name.indexOf(val) > -1) {
          return it
        }
      })
      if (this.contractListTableFilter.length > 0) {
        let length = this.page.pageSize
        //如果筛选出来的数组长度小于10 就用数组长度，防止push undefind 进入数组
        if (this.contractListTableFilter.length < length) {
          length = this.contractListTableFilter.length
        }
        let arr = []
        if (this.listSearch) {
          //有值 就用filter 数组
          for (let i = 0; i < length; i++) {
            arr.push(this.contractListTableFilter[i])
          }
        } else {
          //如果搜索框没值 就用原数组
          for (let i = 0; i < 10; i++) {
            arr.push(this.contractListTable[i])
          }
        }
        this.contractListTablePaged = arr
      } else {
        this.contractListTablePaged = []
      }
      this.page.total = this.contractListTableFilter.length
      this.page.currentPage = 1
      this.page.pageSize = 10
      this.$nextTick(() => {
        this.$refs.xTable1.setCheckboxRow(this.checkRowKeysAll, true)
      })
    },
    selectChangeEvent({ checked, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }) {
      console.log(checked, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event)
      row.isChecked = checked
      row.isNewCheck = checked
      if (checked) {
        this.checkRowKeysAll.push(row)
      }
      if (!checked) {
        if (this.checkRowKeysAll.length > 0) {
          for (let i in this.checkRowKeysAll) {
            if (this.checkRowKeysAll[i].id == row.id) {
              this.checkRowKeysAll.splice(1, i)
            }
          }
        }
      }
      const records = this.$refs.xTable1.getCheckboxRecords()
      console.info(`勾选${records.length}个树形节点`, records)
    },
    disabledFun({ row }) {
      let arr = this.secondTableData.map(it => it.id)
      if (arr.includes(row.id)) {
        return false
      } else {
        return true
      }
    },
    selectAllEvent({ checked }) {
      const records = this.$refs.xTable1.getCheckboxRecords()
      console.log(checked ? '所有勾选事件' : '所有取消事件', records)
    },
    getSelectEvent() {
      //获取选中的数据
      let selectRecords = this.$refs.xTable1.getCheckboxRecords()
      console.log(selectRecords)
    },
    //重置dialog
    closeDialogReset() {
      this.isAddProject = false
      this.isAddContract = false
      this.showSelectDialog = false
    },

    chooseLeft(item) {
      this.currentCost = item
      this.currentCostId = item.id
    },
    getSonTreeData(val) {
      this.sonTreeData = val
      //扁平化 获取最近的一层叶子节点id
      let arr = JSON.parse(JSON.stringify(val))
      let arr2 = this.$publicJs.getNewTreeData(arr, 'children')
      for (let i in arr2) {
        if (!arr2[i].isOld && arr2[i].isLeaf) {
          this.currentCostId = arr2[i].id
          this.currentCost = arr2[i]
          return
        }
      }
    },
    addList(val) {
      val.forEach((item, index) => {
        item.number = item.detailNum
        item.realName = item.detailName
        item.unit = item.detailUnit
      })
      this.costArr.push(...val)
      this.currentCost = this.costArr[this.costArr.length - 1]
      this.currentCostIndex = this.costArr.length
    },
    addCost() {
      this.treeEditDialogData = {
        show: true,
        isFirst: this.isFirst
      }
      this.isFirst = false
      /*this.costArr.push({
        name: '',
        number: '',
        name: '',
        unit: '',
        price: '',
        supervisorPrice: '',
        designPrice: '',
        trackAuditPrice: '',
        companyPrice: '',
        priceSource: '',
        newSonSource: '',
        remark: '',
        id: uuidv4().split('-')[0]
      })
      this.currentCost = this.costArr[this.costArr.length - 1]
      this.currentCostIndex = this.costArr.length*/
    },
    deleteCost(index, id) {
      this.costArr.splice(index, 1)
      // 删除的是当前选中问题
      if (this.currentCost && this.currentCost.id == id && this.costArr.length > 0) {
        this.currentCost = this.costArr[this.costArr.length - 1]
        this.currentCostIndex = this.costArr.length
      }
      // 删除了最后一个问题
      if (this.costArr.length <= 0) {
        this.currentCostIndex = ''
        this.currentCost = ''
      }
    },
    chooseRequestForm(val) {
      safetyInspection.getOne(val).then(res => {
        if (res.code == 200) {
          let data = res.data
          this.formBaseData.formIdSurveyFirstDate = data.surveyTime
          this.$forceUpdate()
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2('获取详情信息失败')
      })
    },
    chooseUnitPriceForm() {

    },
    chooseModifyDesign(val) {
      designChangeApply.getOne(val).then(async (res) => {
        if (res.code == 200) {
          let data = res.data
          // 中间进行处理数据 然后赋值
          this.$set(this.formBaseData, 'code', data.changeCode)
          this.$set(this.formBaseData, 'moneyPlan', data.changeAmount)
          this.$set(this.formBaseData, 'pileNo', data.mileageStakeNum)
          this.$set(this.formBaseData, 'changePart', data.changeName)
          this.$set(this.formBaseData, 'changeContent', data.changeContent)
          this.$set(this.formBaseData, 'changeReason', data.reason)
          switch (data.changeLevel) {
            case "1": this.formBaseData.modifyLevel = this.selectList.changeLevel[0].id; break;
            case "2": this.formBaseData.modifyLevel = this.selectList.changeLevel[1].id; break;
            case "3": this.formBaseData.modifyLevel = this.selectList.changeLevel[2].id; break;
            default:
          }

        } else {
          this.$messageError(res.data.message)
        }
      }).catch((res) => {
        console.log('请求出现错误', res)
        this.$messageError(this.$route.name + '获取详情请求-请求失败')
      })
    },
    showRowTable() {
      if (this.detailType == 'check' || this.detailType == 'approve') {
        return true
      } else {
        return false
      }
    },
    initBtn() {
      console.log('initBtn')
      const params = {
        businessId: this.formBaseData.id,
        procDefKey: 'ModifyFeeApplyProcess',
        url: this.attributeUrl,
        entity: this.formBaseData,
        variables: this.variables
      }
      this.$refs.bpmnForm.initNodeAttribute(params)
      this.$refs.btn.getBtnListWithParam(params)
    },
    /**
     * 校验表2
     **/
    validateTable2() {
      if (this.formBaseData.wbshookList == null || this.formBaseData.wbshookList.length == 0) {
        return false
      }
      return true
    },
    onApprove(params, callback) {
      if (this.loading) {
        msgUtil.warning2('处理中……请勿多次点击');
        return;
      }
      this.loading = true;
      this.$refs['formBaseData'].validate((valid) => {
        if (valid) {
          const dealForm = this.$refs.bpmnForm.getForm()
          if (!params || params.isReject != 1) {
            if (this.$refs.bpmnForm.showUserSelect) {
              if (!dealForm.selectAssigneeList.length) {
                this.$refs.btn.resetLoading()
                callback && callback()
                msgUtil.error2('请选择处理人!')
                this.loading = false;
                return
              } else {
                this.$refs.btn.resetLoading()
                callback && callback()
              }
            } else {
              this.$refs.btn.resetLoading()
              callback && callback()
            }
          }
          //  检查是否已填写所有审批值


          let data = Object.assign({}, this.formBaseData)
          data.file = []
          data.filePage = []

          this.approveForm.procDefKey = 'ModifyFeeApplyProcess'
          this.approveForm.businessId = data.id
          this.approveForm.procInstId = data.procInstId
          this.approveForm.description = dealForm.description
          this.approveForm.selectAssigneeList = dealForm.selectAssigneeList
          this.approveForm.entity = data
          // 覆盖按钮参数
          Object.assign(this.approveForm, params)
          service.audit(this.approveForm).then(r => {
            msgUtil.success2('审批成功!')
            this.formShow = false
            this.$emit('reloadList')
            this.loading = false;
          }).finally(() => {
            this.loading = false;
            callback && callback()
          })
        } else {
          this.loading = false;
          msgUtil.error2('请先填写【基本信息】和【其他资料】中的必填项')
          this.$refs.btn.resetLoading()
          callback && callback()
        }
      })
    },
    // 上报
    onApply(_, callback) {
      if (this.loading) {
        msgUtil.warning2('处理中……请勿多次点击');
        return;
      }
      this.loading = true;
      if (this.detailType === 'build') {
        this.formBaseData.projectId = this.projectId
      }
      // 表单验证
      this.$refs['formBaseData'].validate((valid) => {
        if (valid) {
          if (!this.validateTable2()) {
            msgUtil.error2('请在【变更部位】填写变更内容')
            this.$refs.btn.resetLoading()
            this.loading = false;
            return
          }
          let startForm = {}
          startForm.entity = this.formBaseData
          startForm.procDefKey = 'serviceProcess'
          startForm.businessId = this.formBaseData.id
          startForm.variables = this.variables
          const dealForm = this.$refs.bpmnForm.getForm()
          startForm.selectAssigneeList = dealForm.selectAssigneeList
          if (!dealForm.selectAssigneeList.length) {
            callback && callback()
            msgUtil.error2('请选择处理人!')
            this.loading = false;
            return
          }
          service.report(startForm).then(async (res) => {
            this.loading = false;
            if (res.code == 200) {
              this.detailId = res.data.businessId
              this.formShow = false
              this.$notify({
                title: '上报成功',
                type: 'success',
                duration: 1500
              })
              this.$refs.btn.resetLoading()
              await this.$emit('reloadList')
            }
          }).finally(() => {
            this.loading = false;
            this.$refs.btn.resetLoading()
            callback && callback()
          })
        } else {
          this.loading = false;
          msgUtil.error2('请先填写【基本信息】和【其他资料】中的必填项')
          this.$refs.btn.resetLoading()
        }
      })
    },
    cancel() {
      this.handleClickDeal('cancel')
    },
    onSave(_, callback) {
      this.handleClickDeal('submit', { flag: 1 }, callback)
    },
    onComplete(data) {
      this.wfNode = data
    },
    initData() {
    },
    getDetail() {
      service.getOne(this.detailId).then(async (res) => {
        if (res.code == 200) {
          let data = res.data
          // 中间进行处理数据 然后赋值
          this.formBaseData = data
          this.projectId = this.formBaseData.projectId
          this.sectionId = this.formBaseData.sectionId
          //  回显左侧的树
          this.recoverLeftTreeShow()
          //  加载按钮
          if (this.detailType == 'approve' || this.detailType == 'edit') {
            this.initBtn()
          }
          this.getRelateFromLists();
          this.$refs.cmsFileTable.getFiles()
          this.$forceUpdate()
        } else {
          this.$messageError(res.data.message)
        }
      }).catch((res) => {
        console.log('请求出现错误', res)
        this.$messageError(this.$route.name + '获取详情请求-请求失败')
      })
    },
    /**
     * 回显左侧的树
     */
    recoverLeftTreeShow() {
      this.$set(this, 'treeData', this.formBaseData.leftTreeData)
    },
    /**
     * 懒加载树时自动展开并选中节点
     */
    recoverTreeData() {
      var nodeToAutoSel = this.formBaseData.nodeToAutoSel
      if (!nodeToAutoSel || nodeToAutoSel.length == 0) {
        return
      }
      this.nodeToAutoSelQueue = JSON.parse(JSON.stringify(nodeToAutoSel))
      let that = this
      setTimeout(
        () => {
          this.autoExpandNode(() => {
            this.autoSelect(this.formBaseData.nodeToAutoSel)
          })
        }, 20
      )
    },
    /**
     * 回显时自动展开节点
     */
    autoExpandNode(finishCB) {
      if (this.nodeToAutoSelQueue.length == 0) {
        if (finishCB) finishCB()
        this.autoExpandLoading = false
        return
      }
      this.autoExpandLoading = true
      let id = this.nodeToAutoSelQueue[0]
      try {
        let node = this.$refs.addTree.getNode(id)
        if (node != null) {
          node.expand(() => {
            this.nodeToAutoSelQueue.splice(0, 1)
          })
        }
        setTimeout(() => {
          this.autoExpandNode(finishCB)
        }, 50)
      } catch (e) {

      }
    },
    /**
     * 回显时自动选中节点
     * @param ids
     */
    autoSelect(ids) {
      ids.forEach((id) => {
        let node = this.$refs.addTree.getNode(id)
        if (node != null) {
          node.checked = true
        }
      })
    },
    handleClickDeal(type, res, callback) {
      switch (type) {
        case 'cancel':
          console.log(this.activeName)
          if (this.$refs['formBaseData'] !== undefined) {
            this.$refs['formBaseData'].resetFields()
          }
          this.formBaseData = {
            'code': '',
            'codeSerial': '',
            'codeFlowNum': null,
            'moneyPlan': null,
            'modifyLevel': '',
            'moneyReport': null,
            'reportDate': null,
            'formIdDesign': '',
            'formIdUnitPrice': '',
            'formIdSurveyFirst': '',
            'formIdSurveyFirstDate': null,
            'changePart': '',
            'pileNo': '',
            'changeContent': '',
            'changeReason': '',
            'changeTechCompare': '',
            'graphNoOld': '',
            'graphNoChange': '',
            'applierName': '',
            'applierPosition': '',
            'applierCompanyName': '',
            'planToUse': '',
            'calMethods': '',
            'calContent': '',
            file: []
          }
          this.isFirst = true
          this.selectList.supervisedDeptList = []
          this.selectList.issuingDeptList = []
          this.selectList.supervisedOperatorList = []
          this.formShow = false
          this.isShowBpmn = false
          break
        case 'submit':
          // 表单验证
          this.$refs['formBaseData'].validate((valid) => {
            console.log(valid)
            if (valid) {
              if (!this.validateTable2()) {
                msgUtil.error2('请在【变更部位】填写变更内容')
                this.$refs.btn.resetLoading()
                return
              }
              this.submitDetail(callback)
            } else {
              msgUtil.error2('请先填写【基本信息】和【其他资料】中的必填项')
              this.$refs.btn.resetLoading()
              callback && callback()
            }
          })
          break
        case 'selected':
          // 表单验证
          this.selectedHook()
          break
        case 'selectedcancel':
          this.listSearch = ''
          this.contractListTablePaged = []
          this.checkRowKeysIds = []
          this.contractListTableFilter = []
          this.page.currentPage = 1
          this.showContractListDialog = false
          break
      }
    },
    submitDetail(callback) {
      if (this.loading) {
        msgUtil.warning2('处理中……请勿多次点击');
        return;
      }
      this.loading = true;
      let url = '/buss-measure/modifyFeeApply/add'
      if (this.detailType === 'build') {
        url = '/buss-measure/modifyFeeApply/add'
      } else {
        url = '/buss-measure/modifyFeeApply/edit'
      }
      if (this.detailType === 'build') {
        this.formBaseData.projectId = this.projectId
      }
      return this.$httpPost(
        url, this.formBaseData)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.detailId = res.data.id
            this.$messageSuccess('保存成功')
            this.formShow = false
            this.$refs.btn.resetLoading()
            // 传值给父组件刷新列表
            this.$emit('reloadList')
            this.$refs['cmsFileTable'].bindAllFile(this.detailId)
            if (callback) callback()
          } else {
            this.$refs.btn.resetLoading()
            this.$messageError(res.message)
          }

        })
        .catch((res) => {
          console.log('请求出现错误', res)
          this.$refs.btn.resetLoading()
          this.loading = false;
          this.$messageError(this.$route.name + '提交详情-请求失败')
        })
    },
    /**
     *显示删除按钮
     * @param row
     */
    buttonDelShow(row) {
      let flag = false
      if (
        (this.detailType === 'build' || this.detailType === 'edit') &&
        row.file[0].realName !== '' &&
        !row.isNeed
      ) {
        flag = true
      }
      // 多文件上传的控制的控制
      if (row.isMulti) {
        flag = false
      }
      return flag
    },
    /**
     *控制显示暂无文件
     * @param row
     */
    showNone(row) {
      let flag = false
      if (
        this.detailType !== 'build' &&
        this.detailType !== 'edit' &&
        row.file[0].realName === ''
      ) {
        flag = true
      }
      return flag
    },
    /**
     * 控制查看按钮显示
     * @param row
     */
    buttonCheckShow(row) {
      let flag = false
      if (
        this.detailType !== 'build' &&
        this.detailType !== 'edit' &&
        row.file[0].realName !== ''
      ) {
        flag = true
      }

      if (row.isMulti) {
        flag = false
      }
      return flag
    },
    /**
     * 控制上传按钮显示
     * @param row
     * @returns {boolean}
     */
    buttonUploadShow(row) {
      let flag = false
      if (this.detailType === 'build' || this.detailType === 'edit') {
        flag = true
      }
      return flag
    },
    saveFiles() {
      this.$refs['cmsFileTable'].bindAllFile(this.detailId)
    },
    tableChange(val) {
      this.$set(this, 'buildUnitTable', [...val])
    }
  }
}
</script>
<style scoped lang='scss'>
.WholeScroll {
  overflow-y: auto;
}

.detail-box {
  width: 100%;
  height: 570px;

  .content-box {
    max-height: 690px;
    overflow-y: auto;
  }
}

.file-table {
  min-height: 100px;
  height: fit-content;
  width: 100%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
}

li {
  list-style-type: none;
}

.question-box {
  border: 1px solid #e2e8ec;
  display: flex;
  margin-top: 10px;
  flex-direction: row;

  .question-left-box {
    border-right: 1px solid #e2e8ec;
    padding: 20px 10px;
    width: 200px;
    height: 500px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 70px;
    position: relative;

    .add-question {
      position: absolute;
      bottom: 20px;
      width: 120px;
      left: calc(50% - 60px);
      border: 1px solid #409eff !important;
      color: #409eff !important;
      background-color: transparent !important;
    }
  }

  .question-right-box {
    width: calc(100% - 140px);
    height: 500px;
    padding: 15px;
  }
}

//变更部位样式
.secondPanContent {
  display: flex;
  flex-direction: row;
  height: 550px;
  margin-top: 15px;

  .contentTree {
    min-width: 250px;
    max-width: 250px;
    height: 97%;
    border: 1px solid rgba(125, 125, 125, 0.4);
    overflow: scroll;

    .WhiteScroll {
      width: 100%;
    }
  }

  .contentTable {
    overflow: scroll;
  }

  .contentTable {
    height: 97%;
    flex-grow: 1;
  }
}

.tree {
  height: 500px;
  overflow-y: auto;
  overflow-x: auto;
}

.addProjectDialog {
  .addProjectLeft {
    width: 360px;
    height: 100%;
    border-right: 1px solid rgba(125, 125, 125, 0.4);
    overflow: scroll;

    .WhiteScroll {
      width: max-content;
    }
  }

  .addProjectRight {
    flex-grow: 1;

    .top {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin: 0 15px;

      // .el-button--primary {
      //     height: 34px;
      //     color: #409EFF;
      //     background-color: #ffffff;
      //     font-size: 13px;
      //     padding: 10px 5px;
      // }
    }

    .secondForm {
      width: 85%;
      margin: 0 auto;

      .el-input {
        width: 450px;
      }
    }
  }

  .addProjectTittle {
    font-size: 16px;
    color: #000000;
  }
}

.secondTable {
  margin-left: 2%;
  margin-right: 1%;
  margin-top: 15px;

  .tableChild {
    height: 40px;
    line-height: 40px;
    display: flex;
    flex-direction: row;
    color: #7d7d7d;
    font-size: 14px;

    .title {
      min-width: 150px;
    }

    .child_left {
      width: 50%;
    }

    .child_right {
      width: 50%;
    }

    .title,
    .content {
      border: 1px solid rgba(125, 125, 125, 0.4);
      border-right: none;
      border-bottom: none;
    }

    .title {
      width: 35%;
      text-align: end;
      padding-right: 15px;
      background-color: #f2f2f2;
    }

    .content {
      text-align: start;
      padding-left: 15px;
      background-color: #ffffff;
    }
  }
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;

  span:nth-of-type(1) {
    width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.showTree {
  ::v-deep .el-tree-node__content {
    width: 340px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    .custom-tree-node {
    }
  }
}
</style>
